<template>
  <div class="container container--zone" v-if="videoList && videoList.length > 0">
    <div class="region region--full">
      <div class="component component--module video-headlines full-width background--dark">
        <div class="header header--primary">
          <h2 class="title">
            <a class="link l-video" href="video">Trending Video</a>
          </h2>
          <router-link class="btn btn--text align--right mrbg" to="/videoCenter">
            Go to Video Center<i class="icon icon--arrow-right"></i>
          </router-link>
        </div>
        <div class="column column--primary">
          <div class="element element--article is-lead video">
            <div class="base-video">
              <div class="base-video-two">
                <video v-if="videodata == 0" ref="videoElement" class="video" controls :src="currentUrl">
                  <!-- <source type="video/mp4" src="./text.mp4"> -->
                </video>
                <button v-if="videodata == 1" @click="changeVideoData" aria-label="Play video"
                  class="base__videoHint_qqM8mqaB1e13KXjxbt5Y btnZindex">
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px"
                    viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
                    <g id="XMLID_2_" opacity="1">
                      <path fill="#FFFFFF"
                        d="M26,51.5C11.9,51.5,0.5,40.1,0.5,26C0.5,11.9,11.9,0.5,26,0.5c14.1,0,25.5,11.4,25.5,25.5C51.5,40.1,40.1,51.5,26,51.5z">
                      </path>
                      <path fill="#FFFFFF"
                        d="M26,1c13.8,0,25,11.2,25,25S39.8,51,26,51S1,39.8,1,26S12.2,1,26,1 M26,0C11.7,0,0,11.7,0,26s11.7,26,26,26 s26-11.7,26-26S40.3,0,26,0L26,0z">
                      </path>
                    </g>
                    <polygon id="XMLID_1_" fill="#333333" points="19.6,37.5 19.6,14.5 37.8,25.5 "></polygon>
                  </svg>
                </button>
                <img v-if="videodata == 1" :src="defaultImg" style="height: 347px" @click="changeVideoData" />

              </div>
              <div class="base__videoC">
                <router-link class="base__videoTitle_H" :to="{ path: '/videoDetail', query: { id: defaultId } }">
                  {{ defaultTitle }}</router-link>
              </div>
              <div class="youtube">
                <button class="subscit">YouTube</button>
                <span class="text">Want more videos from Sinopoly Watch? Subscribe to our channel on YouTube!</span>
              </div>
            </div>
          </div>
        </div>
        <div class="column column--aside video-aside">
          <videoMore :videoData="videoMoreList" @changeVideo="changeVideo"></videoMore>
        </div>
        <div class="column column--aside">
          <div class="element element--article dblock" v-for="(item, index) in videoImg" :key="index">
            <figure class="article__figure">
              <router-link class="figure__image" :to="{ path: '/videoDetail', query: { id: item.id } }">
                <img alt="full" class="lazyloaded" :data-src="item.src" :src="item.src" />
              </router-link>
            </figure>
            <div class="article__content">
              <h3 class="article__headline">
                <span class="article__label"></span>
                <a class="link" href="/video/sectorwatch">Watch Now</a>
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import videoMore from "./videoMore.vue";
import { useDataArrays } from "../../../api/data";
import homeRequest from "@/api/home.js";
import { getConfig } from "@/utils/index";
const videoList = ref([])
const videoMoreList = ref([])
const videoImg = ref([])
const currentUrl = ref('') //当前播放视频
// videodata 判断显示（1）图片还是（0）视频
let videodata = ref("1");
// 获取 video 
const videoElement = ref(null);
const defaultImg = ref('') //默认第一个展示图片
const defaultTitle = ref('')
const defaultId = ref('')
// 判断是否播放 false(暂停) true（播放）
const isPlaying = ref(false);
// 点击隐藏图片和按钮 开始播放 使用settimeout延迟获取
function changeVideoData() {
  videodata.value = "0";
  setTimeout(() => {
    // console.log(videoElement.value,'222')
    videoElement.value.play()
  }, 1000)
  isPlaying.value = !isPlaying.value;
}
onMounted(() => {
  //获取视频数据
  getlist()
})
const changeVideo = (data) => {
  currentUrl.value = getConfig('awsPrefix') + data.url
  defaultTitle.value = data.title
  defaultId.value = data.id
  changeVideoData()
}
const getlist = () => {
  homeRequest.videoData({})
    .then((res) => {
      if (res.code === 0) {
        videoList.value = res.data.records
        defaultImg.value = getConfig('awsPrefix') + videoList.value[0].cover
        currentUrl.value = getConfig('awsPrefix') + videoList.value[0].url
        defaultTitle.value = videoList.value[0].title
        defaultId.value = videoList.value[0].id
        videoMoreList.value = videoList.value.slice(1, 6)
        videoMoreList.value.forEach((item) => {
          item.src = getConfig('awsPrefix') + item.cover
        })
        videoImg.value = videoList.value.slice(6, 9)
        videoImg.value.forEach((item) => {
          item.src = getConfig('awsPrefix') + item.cover
        })
      }
    })
    .catch((e) => {
    });
}
</script>
<style lang="scss" scoped>
.header {
  .l-video {
    background: #202020;
    color: hsla(0, 0%, 100%, 0.5);
  }

  .mrbg {
    background: #202020;
    color: #63bee8;
  }
}

.figure__image {
  padding-bottom: 46.25%;
}

.video-headlines .column--aside {
  display: block;

}

.base-video {
  top: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: 6;
  background-color: #000;
  // position: absolute;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;

  .base-video-two {
    color: #fff;
    font-family: "Retina", Helvetica, sans-serif;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    // position: absolute;
    text-align: center;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.4) 100%);

    .btnZindex {
      z-index: 10;
      position: absolute;
    }

    img {
      // position: absolute;
      // top: 0;
      width: 100%;
      height: 100%;
      left: 0;
    }


  }
}

.base__videoC {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  font-size: 22px;
  line-height: 28px;
  text-shadow: 1px 1px 2px #000;
  color: #fff;
  margin-top: 10px;

  .base__videoTitle_H {
    font-weight: 500;
    width: 100%;
    text-align: left;
    margin: 0 auto;
  }

}

.youtube {
  margin-top: 20px;

  .subscit {
    padding: 0 8px 0 5.5px;
    height: 24px;
    color: #fefefe;
    background-color: #e62117;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    margin-right: 10px;
  }

  .subscit:before {
    margin-right: 6px;
    background-image: url(../../src/assets/lozenge.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 16px;
    height: 12px;
    content: '';
    display: inline-block;
    vertical-align: middle;
  }

  .text {
    color: #939393;
    font-size: 11px;
  }
}

.video-aside {
  max-height: 530px;
  margin-bottom: 20px;
  overflow-y: scroll;
  position: relative;
  max-width: 320px;
  display: block !important;
}

@media (max-width: 1295px) {
  .video-aside {
    max-height: 470px;
  }
}

@media (max-width: 976px) {
  .video-aside {
    max-width: 100%;
    margin-top: 84px;
  }
}

.video-aside::-webkit-scrollbar {
  width: 0 !important;
}

.dblock {
  display: block;
  width: 100%;
}

.video {
  width: 620px;
  height: 350px;
}
</style>
